<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增项目' : '修改项目'" :close-on-click-modal="false" width="65%">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="名称" prop="projectName">
						<el-input v-model="dataForm.projectName" placeholder="请输入名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="包名" prop="projectPackage">
						<el-input v-model="dataForm.projectPackage" placeholder="请输入包名" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="版本" prop="projectVersion">
						<el-input v-model="dataForm.projectVersion" placeholder="请输入版本" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="数据源" prop="datasourceId">
						<el-select v-model="dataForm.datasourceId" clearable filterable placeholder="请选择数据源" style="width: 100%">
							<el-option v-for="item in datasourceList" :key="item.id" :label="item.connName" :value="item.id">
								<span style="font-weight: bold">{{ item.connName }}</span>
								<span v-if="item.dataSourceDesc && item.dataSourceDesc.trim()" style="color: #999; font-size: 12px"
									>（{{ item.dataSourceDesc }}）
								</span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="项目模板组" prop="projectTemplateGroupId">
						<el-select v-model="dataForm.projectTemplateGroupId" placeholder="请选择项目模板组" style="width: 100%" clearable filterable>
							<el-option v-for="item in projectTemplateGroups" :key="item.id" :label="item.groupName" :value="item.id">
								<span style="font-weight: bold">{{ item.groupName }}</span>
								<span v-if="item.groupDesc && item.groupDesc.trim()" style="color: #999; font-size: 12px">（{{ item.groupDesc }}）</span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="表模板组" prop="tableTemplateGroupId">
						<el-select v-model="dataForm.tableTemplateGroupId" placeholder="请选择表模板组" style="width: 100%" clearable filterable>
							<el-option v-for="item in tableTemplateGroups" :key="item.id" :label="item.groupName" :value="item.id">
								<span style="font-weight: bold">{{ item.groupName }}</span>
								<span v-if="item.groupDesc && item.groupDesc.trim()" style="color: #999; font-size: 12px">（{{ item.groupDesc }}）</span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="生成方式" prop="generatorType">
						<el-radio-group v-model="dataForm.generatorType">
							<el-radio :label="0">zip压缩包</el-radio>
							<el-radio :label="1">服务器本地</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="baseClassId" label="Entity基类">
						<el-select v-model="dataForm.baseClassId" placeholder="请选择Entity基类" style="width: 100%" clearable filterable>
							<el-option v-for="item in baseClassList" :key="item.id" :label="item.code" :value="item.id">
								<span style="font-weight: bold">{{ item.code }}</span>
								<span v-if="item.remark && item.remark.trim()" style="color: #999; font-size: 12px">（{{ item.remark }}）</span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="后端路径" prop="backendPath">
						<el-input v-model="dataForm.backendPath" placeholder="请输入后端路径" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="前端路径" prop="frontendPath">
						<el-input v-model="dataForm.frontendPath" placeholder="请输入前端路径" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12"> </el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="作者" prop="author">
						<el-input v-model="dataForm.author" placeholder="请输入作者" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="描述" prop="projectDesc">
						<el-input v-model="dataForm.projectDesc" placeholder="请输入描述" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue' // 新增计算属性导入
import { ElMessage } from 'element-plus/es'
import { useProjectApi, useProjectSubmitApi } from '@/api/project'
import { templateGroupListApi } from '@/api/template'
import { useDataSourceListApi } from '@/api/datasource'
import { useBaseClassListApi } from '@/api/baseClass'

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()

const dataForm = reactive({
	id: null,
	projectName: '',
	projectPackage: '',
	projectVersion: '',
	datasourceId: null,
	projectTemplateGroupId: null,
	tableTemplateGroupId: null,
	backendPath: '',
	frontendPath: '',
	generatorType: null,
	projectDesc: '',
	author: '',
	baseClassId: null
})

const templateGroupList = ref<any[]>([])
const datasourceList = ref<any[]>([])
const baseClassList = ref<any[]>([])

const init = (id?: number) => {
	visible.value = true
	dataForm.id = null

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}

	getTemplateGroupList()

	getDataSourceList()

	getBaseClassList()

	if (id) {
		getProject(id)
	}
}

const getTemplateGroupList = () => {
	templateGroupListApi().then(res => {
		templateGroupList.value = res.data
	})
}

const getDataSourceList = () => {
	useDataSourceListApi().then(res => {
		datasourceList.value = res.data
	})
}

const getBaseClassList = () => {
	useBaseClassListApi().then(res => {
		baseClassList.value = res.data
	})
}

const getProject = (id: number) => {
	useProjectApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}

const dataRules = ref({
	projectName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	projectPackage: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	projectVersion: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	datasourceId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	projectTemplateGroupId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	tableTemplateGroupId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	generatorType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const projectTemplateGroups = computed(() => {
	return templateGroupList.value.filter(item => item.type === 0)
})

const tableTemplateGroups = computed(() => {
	return templateGroupList.value.filter(item => item.type === 1)
})

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		useProjectSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})
</script>
